<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:组织管理
* @fileName:organization.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-6
!-->
<script setup lang="ts">
// 引入组织管理查询
import OrganizationSearch from "./components/organization-search.vue";
// 引入组织管理详情
import OrganizationDetails from "./components/organization-details.vue";
// 引入组织管理分页
import OrganizationPagination from "@/components/common/pagination.vue";
//引入组织管理新增
import OrganizationDrawer from "./components/drawer/organization-drawer.vue";

import { ref, reactive, onMounted } from "vue";
import { getCurrentInstance } from "vue";
import { showErrorMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;
//控制新增弹窗显隐
const drawershow = ref(false);
const direction = ref("rtl");
// 列表数据、分页变量
const listData = reactive({
  tableData: [],
  total: 0,
  isListLoading: false,
});

// 定义请求数据
let reqData = {
  orgName: "",
  page: 1,
  pageSize: 10,
};

/**
 * @description:查询方法
 * @param {any} serachParam
 * @return void
 */
const searchFunc = (serachParam: any) => {
  reqData.orgName = serachParam.organizationValue;
  reqTableList();
};

/**
 * @description:新增方法
 * @param {any} showdrawer
 * @return void
 */
const addNewFunc = (showdrawer: any) => {
  drawershow.value = showdrawer;
};

/**
 * @description:新增表单提交方法
 * @param {any} submitParam
 * @return void
 */
const submitFunc = (submitParam: any) => {
  //接收表单提交数据
  drawershow.value = false;
  reqTableList();
};

/**
 * @description:列表刷新函数
 * @param {any} fresParam
 * @return void
 */
const fresFunc = (fresParam: any) => {
  reqTableList();
};

/**
 * @description:删除数据方法
 * @param {any} deleteParam
 * @return void
 */
const deleteFunc = (deleteParam: any) => {
  reqTableList();
};

/**
 * @description:获取当前分页页码
 * @param {any} pageNumber
 * @return void
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 改变每页显示数量
 * @param pageNumber 页码
 * @reture viod
 */
const changePageSize = (pageNumber: number) => {
  reqData.pageSize = pageNumber;
  reqTableList();
};

/**
 * @description:获取列表数据请求方法
 * @return void
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/manager/org/query`,
    params: {
      page: reqData.page,
      size: reqData.pageSize,
    },
    data: {
      orgName: reqData.orgName,
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      res.data.records.forEach((item: any) => {
        item.selected = false;
      });
      listData.tableData = res.data.records;
      listData.total = Number(res.data.total);
    }
    listData.isListLoading = false;
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};
//获取数据
onMounted(() => {
  reqTableList();
});
</script>

<template>
  <div class="page-list">
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <organization-search
        :searchFunc="searchFunc"
        :addNewFunc="addNewFunc"
        :isSearchLoading="listData.isListLoading"
      ></organization-search>
      <!-- 列表详情 -->
      <organization-details
        :tableData="listData.tableData"
        :deleteFunc="deleteFunc"
        :fresFunc="fresFunc"
        :isListLoading="listData.isListLoading"
      ></organization-details>
      <!-- 分页 -->
      <organization-pagination
        :total="listData.total"
        :pageSize="reqData.pageSize"
        :changePageSize="changePageSize"
        :getCurrentPageNumber="getCurrentPageNumber"
      ></organization-pagination>
    </div>
    <el-dialog
      v-model="drawershow"
      v-if="drawershow"
      title="新增"
      :width="740"
      :direction="direction"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 新增弹窗 -->
      <organization-drawer :submitFunc="submitFunc"></organization-drawer>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.page-list {
  background-color: #fff;
  position: relative;
  padding: 15px;
  height: calc(100vh - 130px);
  :deep(.el-dialog__header) {
    margin: 0px !important;
    border-bottom: 1px solid #ccc;
  }
}
</style>
